<template>
    <div>
        <el-dialog :title="options.title" :visible.sync="options.dialogFormVisible">
            <el-form :model="rolesFrom" :rules="rulesFrom" ref="formName">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="rolesFrom.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
                    <el-input v-model="rolesFrom.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="options.dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFrom">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getList, addList, editList,updateList } from '@/utils/roles'
export default {
    props: {
        options: Object,
        rolesFrom: Object,
        rulesFrom: Object
    },
    data() {
        return {
            formLabelWidth: '120px'
        }
    },
    methods: {
        addFrom() {
            if (this.options.type == 'add') {
                this.$refs.formName.validate(async (valid) => {
                    if (valid) {
                        let { data: res } = await addList(this.rolesFrom)
                        if (res.meta.status == 201) {
                            this.$message.success(res.meta.msg)
                            this.options.dialogFormVisible = false
                            this.$emit('getRolesList')
                        } else {
                            this.$message.error(res.meta.msg)
                        }
                    }
                });
            }else if(this.options.type == 'edit'){
                this.$refs.formName.validate(async (valid) => {
                    if (valid) {
                        let { data: res } = await updateList(this.rolesFrom)
                        
                        if (res.meta.status == 200) {
                            this.$message.success(res.meta.msg)
                            this.options.dialogFormVisible = false
                            this.$emit('getRolesList')
                        } else {
                            this.$message.error(res.meta.msg)
                        }
                    }
                });
            }
        }
    }
}
</script>